<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script src="../jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box_1 {
            height: 540px;
            width: 375px;
            margin: 10px auto;
            background-color: aqua;
            box-shadow: 0px 0px 10px #666;
            border-radius: 10px;
        }
        
        .box {
            position: relative;
        }
        
        .box_footer {
            width: 375px;
            height: 50px;
            position: absolute;
            bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        .box_footer a {
            text-decoration: none;
            color: #333;
            display: block;
            width: 25%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        
        .router-link-exact-active,
        .router-link-active {
            color: red;
            font-weight: bold;
        }
        
        .songs {
            width: 100%;
            height: 400px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            /* border: 1px solid black; */
            margin-top: 10px;
            padding: 10px;
        }
        
        .songs li {
            margin-bottom: 5px;
            cursor: pointer;
        }
        
        .songs_detail {
            width: 100%;
            height: 400px;
            box-sizing: border-box;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="box">
            <router-view class="box_1"></router-view>

        </div>
    </div>
    <template id="main">
        <div>
            <h4 style="text-align: center;">{{title}}</h4>
          <router-view></router-view>
            <myfooter class="box_footer"></myfooter>
        </div>

    </template>
    <template id="myfooter">
        <div>
            <router-link v-for="(item,index) in lists" :key="index" :to="{name:item.name}">{{item.content}}</router-link>
        </div>
    </template>
    <template id="wechat">
        <div>
            <h4 style="text-align: center;">我的歌单</h4>
            <hr>
            <div class="songs">
                    <ul>
                        <li v-for="(item,index) in items" :key="index">
                            <router-link :to="{name:'detail',query:item}">
                                {{item.name}}-{{item.resourceCount}}
                            </router-link>
                        </li>
                    </ul>
            </div>
        </div>
    </template>
    <template id="item">
        <div>
            <h4 style="text-align: center;">歌手名称</h4>
            <div class="songs">
            <ul>
                <li v-for="(item,index) in items" :key="index">
                    <router-link :to="{name:'detail_person',query:item}">
                        {{item.name}}---{{item.alias[0]}}
                    </router-link>
                </li>
            </ul>
        </div>
        </div>
    </template>
    <template id="find">
        <div>
            <h1>我是find的内容</h1>
        </div>
    </template>
    <template id="mine">
        <div>
            <h1>我是mine的内容</h1>
        </div>
    </template>
    <template id="detail">
        <div class="songs_detail">
            <h4 style="text-align: center;">歌单详情页</h4>
            <hr>
            <h1>{{$route.query.name}}</h1>
        </div>
    </template>
    <template id="detail_person">
        <div class="songs_detail">
            <h4 style="text-align: center;">歌手详情页</h4>
            <hr>
            <h1>{{$route.query.name}}</h1>
        </div>
    </template>
    <script>
        //定义尾部导航组件
        Vue.component("myfooter", {
            template: "#myfooter",
            data() {
                return {
                    lists: [{
                        path: "/main/wechat",
                        name: "wechat",
                        content: "微信"

                    }, {
                        path: "/main/item",
                        name: "item",
                        content: "通讯录"

                    }, {
                        path: "/main/find",
                        name: "find",
                        content: "朋友圈"

                    }, {
                        path: "/main/mine",
                        name: "mine",
                        content: "我"

                    }]
                }
            },
        })

        //定义路由组件
        const Main = {
            template: "#main",
            data() {
                return {
                    title: "微信(99)"
                }
            },
        }
        const Wechat = {
            template: "#wechat",
            data() {
                return {
                    items: []
                }
            },
            mounted() {
                $.ajax({
                    url: "http://47.104.209.44:3333/playlist/catlist",
                    type: "GET",
                    data: {},
                    success: res => {
                        // console.log(res.sub);
                        this.items = res.sub;
                    }
                })
            },
        }

        //定义歌单详情路由组件
        const Detail = {
                template: "#detail"
            }
            //定义歌手详情路由组件
        const Detail_person = {
            template: "#detail_person"
        }
        const Item = {
            template: "#item",
            data() {
                return {
                    items: []
                }
            },
            mounted() {
                $.ajax({
                    url: "http://47.104.209.44:3333/artist/list",
                    type: "GET",
                    success: res => {
                        // console.log(res)
                        this.items = res.artists
                    }
                })
            },
        }
        const Find = {
            template: "#find"
        }
        const Mine = {
                template: "#mine"
            }
            //定义一些路由
        const routes = [{
            path: "/",
            //重定向
            redirect: "/main"
        }, {
            path: "/main",
            name: "main",
            redirect: "/main/wechat",
            component: Main,
            children: [{
                path: "/main/wechat",
                name: "wechat",
                component: Wechat

            }, {
                path: "/main/item",
                name: "item",
                content: "通讯录",
                component: Item

            }, {
                path: "/main/find",
                name: "find",
                content: "朋友圈",
                component: Find

            }, {
                path: "/main/mine",
                name: "mine",
                content: "我",
                component: Mine

            }, {
                path: "/main/detail",
                name: "detail",
                component: Detail
            }, {
                path: "/main/detail_person",
                name: "detail_person",
                component: Detail_person
            }]
        }]


        const router = new VueRouter({
            routes: routes,
            mode: "hash"
        })
        const vm = new Vue({
            router,
            data: {
                title: "嵌套路由"
            }
        }).$mount(".app")
    </script>

</body>

</html>